<template>
  <div>
    <div class="d1">
      <p>监控身高最大10：{{height}}</p>
      <button @click="addHeight">修改身高</button>
    </div>
    <div class="d1">
      <p>监控身高最大10：{{height}} -- 监控年龄最大10：{{state.age}}</p>
      <button @click="addAge">修改身高-年龄</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

let height = ref(1)
let addHeight = () => {
  height.value++
}

let state = reactive({
  age: 1
})
let addAge = () => {
  state.age++
  height.value++
}

//监控一个
watch(height, (newVal, oldVal) => {
  if (newVal > 10) {
    height.value = oldVal
  }
  // console.log(newVal, oldVal)
}, {
  immediate: true, // 立即执行
  deep: true // 深度监听
})

//监控两个
watch(
  [height, () => state.age],
  ([hNew, ageNew], [hOld, ageOld]) => {
    if (hNew > 10) {
      height.value = hOld
    }
    if (ageNew > 10) {
      state.age = ageOld
    }
    // console.log(ageNew, ageOld)
  }
)


</script>
<style scoped lang ='less'>
.d1 {
  margin-top: 20px;
}
</style>